<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 生产 -->
		<script src="js/jquery.min.js"></script>
		<script>
			
		
			$(function(){
				
				$(".btn1").click(()=>{
					//想div追加元素
					
					// 	h3
					// let h3  = document.createElement("h3")
					//  h3.innerText = "asdfasdfasf";
					
					
					// $("<h3>appendTo</h3>").appendTo(document.getElementById("d1"));
					// $("<h3>appendTo</h3>").appendTo($("#d1"));
					
					
					
					$("#d1").append("<h3>append</h3>")
					
					
				})
				
				
				$(".btn2").click(()=>{
					$("#d1").prepend("<h3>prepend</h3>")
				})
				
				$(".btn3").click(()=>{
					$("#d1").before("<h3>before</h3>")
				})
				
				$(".btn4").click(()=>{
					$("#d1").after("<h3>after</h3>")
				})

				
			})
			
		</script>
	</head>
	<body >
		
		
		<!-- append   appendTO -->
		<button class="btn1">append</button>
		<button class="btn2">prepend</button>
		<button class="btn3">before</button>
		<button class="btn4">after</button>
		
		
		
		
		a
		<div id="d1" style="border:solid 1px red;height:400px;width:400px" >
			b <br>
			b <br>
			b <br>
			b <br>
		
			c <br>
			c <br>
			c <br>
			
		</div>
		d
	


	</body>
</html>